<template>
  <fieldset>
    <legend>keep-alive</legend>
    <button
      @click="activeCom = item"
      v-for="(item, index) in coms"
      :key="index"
    >
      {{ item }}
    </button>
    <!-- 缓存动态组件的状态 -->
    <!-- 
    include 包含,包含的组件会被缓存
    exclude 排除的组件不被缓存-->
    <keep-alive>
      <h1 :is="activeCom"></h1>
    </keep-alive>
  </fieldset>
</template>
<script>
import acom from "./a";
import bcom from "./b";
import ccom from "./c";
export default {
  data() {
    return {
      coms: ["acom", "bcom", "ccom"],
      activeCom: "acom",
    };
  },
  components: {
    acom,
    bcom,
    ccom,
  },
};
</script>
